<template>
	<!-- 必到家政首页 -->
	<view class="home">
		<!-- 导航 -->
		<view class="header padd_32 clearfix">
			<view class="fl" style="min-width: 141rpx;">
				<text class="fl leftTest">{{addressName}}</text>
				<image class="fl" src="../static/newImg/img/1.png" mode="widthFix"></image>
			</view>
			<view class="fl">
				<text class="fl titleTest">必到</text>
			</view>
		</view>
		<!-- end -->
		<swiper class="swiper" indicator-dots="true" indicator-color="#B2B2B2" indicator-active-color="#000000" autoplay="true" interval="5000" circular="true">
			<swiper-item v-for="(item, index) in swiperList" :key="index+'image'" >
				<image :src="item.url" mode="scaleToFill" @click="swiperClick(index)"></image>
			</swiper-item>
		</swiper>
		<!-- end -->

		<!-- 分类 -->
		<view class="sort">
			<view @click="goList(item.id)" data v-for="item in nav" :key="item.id" class="navigator">
				<image :src="item.icon" mode="widthFix"></image>
				<text>{{ item.name }}</text>
			</view>
			<view @click="more()" class="navigator">
				<image src="../static/images/more.png" mode="widthFix"></image>
				<text>全部服务</text> 
			</view>
		</view>
		<!-- end -->
		
		
		<!-- 滚动公告 -->
		<view class="uni-padding-wrap">
				<view class="uni-swiper-msg-myflex">
					<view class="left-Iocn">
				            <icon class="iconfont icon-voice1"></icon>
					</view>
					<swiper class="limitp-hg" vertical="true" autoplay="true" circular="true" interval="3000">
						<swiper-item v-for="(item, index) in msg" :key="index">
							<navigator class="scrool-list-item">{{item}}</navigator>
						</swiper-item>
					</swiper>
				</view>
		</view>
		<!-- 滚动公告 -->
			
			
		<!-- 精选 -->
		<view class="selected" v-if="list.length>0">
			<view class="title">为您精选</view>
			<view class="jingxuans">
				<view v-for="(item, index) in list" :key="item.id" class="jingxuan">
					<navigator :url="'/pages/details/details-meal?sid=' + item.packageId">
						<image :src="item.imageUrl" class="jingxuan-image"></image>
						<view class="shenglue" style="text-align: center;">{{ item.packageNameAndPrice.name }}</view>
						<view class="shenglue" style="color: #666666;text-align: center;">￥{{ item.packageNameAndPrice.price }}起</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- end -->

		<!-- 猜您喜欢 -->
		<view class="lick" v-if="like.length>0">
			<view class="title">猜您喜欢</view>
			<view class="lick_cont">
				<!-- <waterfall :list="like"></waterfall> -->
				<shop-list :list="like" id=""></shop-list>
			</view>
		</view>
		
		<uni-popup ref="popup_adds" bgColor='true' type="center" @click="close()">
			<image style="width: 550rpx;height:1000rpx" src="../static/images/hongbao.png" @click="close()"></image>
		</uni-popup>
		<!-- end -->
	</view>
</template>

<script>
// #ifdef MP-WEIXIN || APP-PLUS
import amap from '../common/amap-wx.js';
// #endif
import Lottie from 'vue-lottie/src/lottie.vue';
import * as animationData from '../static/data.json';
import waterfall from '@/components/waterfall/waterfall.vue';
import ShopList from '@/components/list/list-shop.vue'
import { mapState, mapMutations } from 'vuex';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import app from "@/App.vue"
export default {
	components: {
		waterfall,
		Lottie,
		ShopList,
		uniPopup
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			sid: '',
			defaultOptions: {
				animationData: animationData.default
			},
			amapPlugin: null,
			key: '90ef785d216807b2a246334999b5a7ec',
			show: false,
			search: [
				{
					id: 0,
					img: '/static/images/nav_icon_store@2x.png',
					name: '店铺搜索'
				},
				{
					id: 1,
					img: '/static/images/nav_icon_set%20meal@2x.png',
					name: '套餐搜索'
				},
				{
					id: 2,
					img: '/static/images/nav_icon_staff@2x.png',
					name: '员工搜索'
				}
			],
			addressName: '',
			tips: '',
			cardCur: 0,
			swiperList: [],
			list: [],
			dotStyle: false,
			towerStart: 0,
			direction: '',
			nav: '',
			like: [],
			urls:'',
			ids:'',
			// msg : [
			// 	'uniapp行业峰会频频亮相开发者反响热烈',
			// 	'DCloud完成B2轮融资，uni-app震撼发布',
			// 	'36氪热文榜推荐、CSDN公号推荐 DCloud'
			//   ]
		};
	},
	onShow() {
		let _this = this
		console.log(_this.hasLogin,"登陆状态")
		if(_this.hasLogin){
			console.log(_this.hasLogin,"_this.hasLogin消息")
			_this.$http
				.get('/user/message/getNewMsg', {
					userId: _this.uerInfo.userId,
					client: 'app'
				})
				.then(function(res) {
					if (res.success) {
						_this.tips = res.data
					}
				}).catch(function(error) {
					console.log(error);
				});
		}
		uni.getStorage({
		    key: 'new',
		    success: function (res) {
				setTimeout(function() {
					_this.$refs.popup_adds.open();
				}, 1000);
				uni.removeStorage({
					key: 'new'
				})
		    },
			fail: function (res) {
			}
		});
	},
	onLoad(option) {
		var _this = this;
		let str = ''
		if (app.globalData.query.q) {
			str = decodeURIComponent(app.globalData.query.q).split('=')[1]
		}
		if (app.globalData.query.sid) {
			str = app.globalData.query.sid
		}
		if (option && option.sid) {
			_this.sid = option.sid
		} else if (str) {
			_this.sid = str
		}
		if (_this.sid) {
			uni.setStorage({ //将订单信息保存在本地
				key: 'parentId',
				data: _this.sid
			})
			app.globalData.query.q = ''
		}
		_this.$http
			.get('/home/page/viewBannerPage')
			.then(function(response) {
				let table = []
				var url = []
				for (let i = 0; i < response.data.length; i++) {
					table.push({
						id: response.data[i].id,
						type: 'image',
						url: response.data[i].imageUrl,
						urls:response.data[i].redirectUrl
					})
					url.push({
						urlds:table[i].urls
					})
				}
				_this.urls = url
				_this.swiperList = table
				_this.TowerSwiper('swiperList'); // 初始化towerSwiper 传已有的数组名即可
			})
			.catch(function(error) {
				// console.log(error);
			});
		// #ifdef MP-WEIXIN || APP-PLUS
		_this.amapPlugin = new amap.AMapWX({
			key: this.key
		});
		_this.getRegeo();
		// #endif

		// #ifdef H5
		_this.getLocation();
		// #endif

		// 业务类型
		_this.$http
			.get('/home/page/getbusinesslist')
			.then(function(response) {
				console.log(response)
				let table = []
				for (let i = 0; i < response.data.length; i++) {
					table.push(response.data[i])
					if (i == 8) {
						break
					}
				}
				_this.nav = table
			})
			.catch(function(error) {
				// console.log(error);
			});

		// 猜你喜欢
		// if (this.hasLogin || true) {
		if (this.hasLogin) {
			_this.$http
				.get('/home/page/query/user/like/enterprise/' + _this.uerInfo.userId)
				.then(function(response) {
					_this.like = response.data;
					console.log('登录like:', response)
				})
				.catch(function(error) {
					// console.log(error);
				});
		} else {
			_this.$http
				.get('/home/page/query/user/like/enterprise/')
				.then(function(response) {
					_this.like = response.data;
					console.log('未登录like:', response)
				})
				.catch(function(error) {
					// console.log(error);
				});
		}

		//为您精选
		_this.$http
			.get('/home/page/viewChoicenessList')
			.then(function(response) {
				// console.log(response);
				_this.list = response.data;
			})
			.catch(function(error) {
				// console.log(error);
			});
		// 消息已读、未读
		
	},
	// #ifdef MP-WEIXIN
	onShareAppMessage(res) {
		 if (res.from === 'button') {// 来自页面内分享按钮
		   // console.log(res.target)
		 }
		 // console.log('分享数据',res)
		 return {
		   title: 'Bee到分享',
		   path: '/pages/index',
		   imageUrl: '/static/images/img_0.png'
		 }
	 },
	onShareTimeline(res) {
		if (res.from === 'menu') {// 来自页面内分享按钮
		  // console.log(res.target)
		}
		// console.log('分享朋友圈进来的',res)
		uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '分享成功'
		})
		return {
		  title: 'Bee到分享',
		   path: '/pages/index',
		  imageUrl: '/static/images/img_0.png'
		}
	},
	  // #endif
	methods: {
		open_adds() {
			this.$refs.popup_adds.open();
		},
		close() {
			this.$refs.popup_adds.close();
		},
		showTab() {
			var _this = this;
			_this.show = !_this.show;
		},
		goList(iteid) {
			console.log(iteid,"iteid")
			uni.navigateTo({
				url: '/pageageA/pages/service/list?id=' + iteid
			})
		},
		more(){
			uni.switchTab ({
				url: '/pages/service/index'
			})
		},
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		// cardSwiper
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		// 初始化towerSwiper
		TowerSwiper(name) {
			let list = this[name];
			for (let i = 0; i < list.length; i++) {
				list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2));
				list[i].mLeft = i - parseInt(list.length / 2);
			}
			this.swiperList = list;
		},
		getLocationInfo(){  //2. 获取地理位置
			var _this=this;
			uni.getLocation({
				type: 'wgs84',
				success (res) {
					// console.log("你当前经纬度是：");
					console.log(res)
					let latitude,longitude;
					latitude = res.latitude.toString();
					longitude = res.longitude.toString();
					uni.request({
						header:{
							"Content-Type": "application/text"
						},
						url:'http://apis.map.qq.com/ws/geocoder/v1/?location='+latitude+','+longitude+'&key=MVGBZ-R2U3U-W5CVY-2PQID-AT4VZ-PDF35',
						success(re) {
							// console.log("中文位置")
							console.log(re)
							_this.Areaaddress  = re.data.result.address;
							if(re.statusCode === 200){
								// console.log("获取中文街道地理位置成功")
							}else{
								// console.log("获取信息失败，请重试！")
							}
						 }
					});
				}
			});
		},
		// #ifdef MP-WEIXIN || APP-PLUS
		getRegeo() {
			uni.showLoading({
				title: '获取信息中'
			});
			this.amapPlugin.getRegeo({
				success: data => {
					this.addressName = data[0].regeocodeData.addressComponent.city;
					// uni.setStorage({ //将订单信息保存在本地
					// 	key: 'addressName',
					// 	data: this.addressName
					// })
					uni.hideLoading();
				}
			});
		},
		// #endif
		// #ifdef H5
		getLocation() {
			uni.getLocation({
				success: function(res) {
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
						method: 'GET',
						data: {
							key: '3cd11ea078502a52c04bba3098ccc67d',
							location: '${res.longitude}, ${res.latitude}'
						},
						success: data => {
							
						},
						fail(err) {
						}
					});
				}
			});
		},
		// #endif
		scroll: function(e) {
			// console.log(e);
			this.old.scrollTop = e.detail.scrollTop;
		},
		// 轮播图跳转
		swiperClick(index){
			console.log(index)
						var _this = this
						for(var a=0;a<_this.urls.length;a++){
							uni.navigateTo({
								url: _this.urls[index].urlds
							});
						}
						
		            }
	}
};
</script>

<style scoped lang="scss">
@import '../colorui/main.css';
@import '../colorui/icon.css';
/* 导航 */
.header {
	height: calc(var(--status-bar-height) + 48px);
	width: 100%;
	background: #FCA800;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	
}
.header image {
	margin-top: calc(var(--status-bar-height) + 34rpx);
	width: 24rpx;
	height: 12rpx;
	margin-left: 10rpx;
}
.leftTest {
	margin-top: calc(var(--status-bar-height) + 17rpx);
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3F3F3F;
	opacity: 1;
}
.titleTest{
	width: 408rpx;
	text-align: center;
	margin-top: calc(var(--status-bar-height) + 16rpx);
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3F3F3F;
	opacity: 0.9;
}
.search-list {
	background-color: #f0f0f0;
	padding: 0 32rpx;
	position: absolute;
	top: 88rpx;
	right: 12rpx;
	border-radius: 10rpx;
}
.search-list navigator {
	width: 158rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 28rpx;
	color: #333;
	text-align: right;
	border-bottom: 1rpx solid #c0c0c0;
	position: relative;
}
.search-list navigator image {
	width: 30rpx;
	position: absolute;
	left: -16rpx;
	top: 6rpx;
}
.search-list navigator:last-child {
	border: 0 none;
}
.search-list::after {
	content: '';
	position: absolute;
	border: solid transparent;
	width: 0;
	height: 0;
	border-width: 14rpx;
	border-bottom-color: #f0f0f0;
	top: -24rpx;
	left: 140rpx;
}
/* banner */
.cu-bar {
	box-shadow: 10px -2px 50px 0px rgba(33, 68, 137, 0.1);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-bottom: 0;
}
/* banner */
swiper{
	margin-top: calc(var(--status-bar-height) + 90rpx);
	height: 278rpx;
	margin-bottom: 32rpx;
}
swiper image{
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.card-swiper {
	height: 278rpx !important;
}
/* #ifdef H5 */
.card-swiper uni-swiper-item {
	padding: 0 !important;
}
/* #endif */
.card-swiper swiper-item {
	padding: 0 !important;
}
/* 分类 */
.sort {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	display: -webkit-flex; /* Safari */
	flex-wrap: wrap;
	margin-top: 27rpx;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #dfdfdf;
}
.sort .navigator {
	width: 110rpx;
	font-size: 24rpx;
	color: #666;
	line-height: 33rpx;
	text-align: center;
	margin: 0 14rpx;
	margin-bottom: 20rpx;
}
.sort .navigator image {
	width: 60%;
	margin: 0 20%;
	height: 92rpx;
}
/* 精选 */
.selected {
	width: 91.48%;
	margin-left: 4.26%;
}
.selected scroll-view {
	width: 100%;
	height: 177rpx;
	display: flex;
	white-space: nowrap;
}
.selected .title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-top: 30rpx;
	margin-bottom: 16rpx;
}
/* 猜您喜欢 */
.lick {
	width: 686rpx;
	margin: 0 auto;
}
.lick .title {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
	margin-top: 30rpx;
	margin-bottom: 16rpx;
}
.lick .lick_cont {
	width: 686rpx;
	margin: 0 auto;
}
.jingxuans{
	width: 100%;
	overflow-x: auto;
	display: flex;
}
.jingxuan{
	margin: 10rpx 10rpx;
	font-size: 26rpx;
	width: 174rpx !important;
	flex-shrink:0;
	overflow: hidden;
}
.jingxuan navigator{
	
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
	border-radius: 10rpx;
}
.jingxuan-image{
	width: 100%;
	height: 174rpx;
	border-radius: 10rpx 10rpx 0 0;
}

.img-iocn{
	width: 50rpx;
	height: 50rpx;
}
.scrool-list-item{
	color: red;
}
	
	.uni-swiper-msg-myflex{
		display: flex;
	}
	
	.left-Iocn{
		width: 40rpx;
		height: 60rpx;
		line-height: 60rpx;	
	}
	
	.limitp-hg{
		width:calc(100% - 50rpx);
		height: 60rpx;
		line-height: 60rpx;
	}
	
	.scrool-list-item{
		font-size: 30rpx;
	}
</style>
